<template>
    <div class="account_manage">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('system.companyMange') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row :gutter="20">
                    <el-col :span="4">
                        <el-form-item prop="id">
                            <el-input v-model="form.id" maxlength="19" placeholder="ID" clearable></el-input><!--ID-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="name">
                            <el-input v-model="form.name" maxlength="100" :placeholder="$t('system.companyName')" clearable></el-input><!--公司名-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="status">
                            <el-select v-model="form.status" clearable :placeholder="$t('common.status')" style="width: 100%"><!--状态-->
                                <el-option key="0" :label="$t('collection.closed')" :value="0"></el-option>
                                <el-option key="1" :label="$t('collection.activated')" :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button @click="onSearch" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6" align="right">
                        <el-button @click="editCompany('add')" type="primary">{{ $t('system.addCompany') }}</el-button>
                    </el-col>
                </el-row>
            </el-form>
        </div>

        <div class="data_list">
            <el-table :data="tableData" :max-height="tableMaxHeight" style="width: 100%">
                <el-table-column label="ID" prop="id" min-width="70"></el-table-column>
                <el-table-column :label="$t('system.companyName')" prop="name" min-width="150"></el-table-column><!--公司名称-->
                <el-table-column :label="$t('system.country')" prop="countries" min-width="150"><!--所属国家-->
                    <template slot-scope="{ row }">{{ row.countries | SwitchCountry }}</template>
                </el-table-column>
                <el-table-column :label="$t('common.remark')" prop="remark" width="160" :show-overflow-tooltip="true"></el-table-column><!--备注-->
                <el-table-column :label="$t('common.createTime')" prop="createTime" min-width="170"><!--创建时间-->
                    <template slot-scope="{ row }">{{ row.createTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column :label="$t('common.updateTime')" prop="updateTime" min-width="170"><!--更新时间-->
                    <template slot-scope="{ row }">{{ row.updateTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template>
                </el-table-column>
                <el-table-column prop="status" :label="$t('common.status')" min-width="100"><!--状态-->
                    <template slot-scope="scope">
                        <el-switch @change="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('common.operation')" min-width="120">
                    <template slot-scope="scope">
                        <el-button @click="editCompany('edit',scope.row)" :disabled="scope.row.status === false" type="text" size="small">{{ $t('finance.edit') }}</el-button>
                    </template>
                </el-table-column>
            </el-table><!--end table-->
        </div>
        <div class="data_page">
            <pagination @pageChange="pageChange" :page="page"><!--分页组件--></pagination>
        </div>

        <!--编辑公司start-->
        <el-dialog :title="$t('system.companyInfo')" :visible.sync="addDialog.isVisible" width="800px">
            <el-form :model="addDialog.form" :rules="addDialog.rules" ref="addDialog.form" label-position="right" label-width="150px">
                <el-form-item :label="$t('system.companyName')" prop="name"><!--公司名称-->
                    <el-input v-model="addDialog.form.name" :disabled="addDialog.type === 'edit'" type="text" maxlength="200"></el-input>
                </el-form-item>
                <el-form-item :label="$t('system.country')" prop="countries"><!--所属国家-->
                    <el-select v-model="addDialog.form.countries" style="width: 100%">
                        <el-option v-for="(country,index) in countryData" :key="index" :value="country.code" :label="$i18n.locale === 'zhCN' ? country.cnName : country.name"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('common.remark')" prop="remark"><!--备注-->
                    <el-input v-model="addDialog.form.remark" type="textarea" :placeholder="$t('verify.underXWords',{x: 200})" maxlength="200" :rows="3"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button @click="addAppSubmit" type="primary">{{ $t('common.confirm') }}</el-button>
                <el-button @click="addDialog.isVisible = false" type="default">{{ $t('common.cancel') }}</el-button>
            </div>
        </el-dialog>
        <!--新增公司end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import { Country } from '@/config'

    export default {
        name: 'systemAccount',
        components: {
            Pagination,
        },
        mixins: [mixin],
        data() {
            return {
                tableData: [],
                form: {
                    id: '',
                    name: '',
                    status: '',
                },
                rules: {
                    id: [
                        {pattern: /^(\d)+$/, message: this.$t('verify.plsInputNumber')}
                    ],
                    name: [],
                    status: [],
                },
                countryData: Country.data,
                addDialog: {
                    type: '',
                    id: '',
                    isVisible: false,
                    form: {
                        name: '',
                        countries: '',
                        remark: '',
                    },
                    rules: {
                        name: [
                            {required: true, message: this.$t('verify.plsInput'), trigger: 'blur'}
                        ],
                        countries: [
                            {required: true, message: this.$t('verify.plsChoose'), trigger: 'change'}
                        ],
                        remark: [],
                    },
                },
            };
        },
        computed: {
            defaultProps() {
                return {
                    children: 'children',
                    label: this.$i18n.locale === 'zhCN' ? 'cnName' : 'name',
                };
            },
        },
        methods: {
            getTableData(page = this.page) {
                const form = this.form;
                const params = {
                    name: form.name,
                    id: form.id,
                    status: form.status,
                    pageNum: page.currentPage,
                    pageSize: this.page.pageSize
                };
                this.$api.systemManage.getCompanyList(params).then((res) => {
                    const {status, data, error} = res;
                    if ('1' === status && error === '00000000') {
                        this.tableData = data.companyList || [];
                        this.tableData.forEach((item) => {
                            item.status = +item.status === 1;
                        });
                        this.setPage({total: data.total,page: page.currentPage}, this.page);
                        this.tableMaxHeight = window.document.body.clientHeight - 200;
                    }
                });
            },
            onSearch() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 新增公司
            editCompany(type,row) {
                this.addDialog.type = type;
                if(type === 'add') {
                    this.addDialog.isVisible = true;
                    this.addDialog.form.name = '';
                    this.addDialog.form.countries = '';
                    this.addDialog.form.remark = '';
                    this.$nextTick( () => {
                        this.$refs['addDialog.form'].clearValidate();
                    });
                }
                if(type === 'edit') {
                    this.addDialog.id = row.id;
                    this.addDialog.isVisible = true;
                    this.addDialog.form.name = row.name;
                    this.addDialog.form.countries = row.countries;
                    this.addDialog.form.remark = row.remark;
                    this.deleteApp = [];
                    this.$nextTick( () => {
                        this.$refs['addDialog.form'].clearValidate();
                    });
                }
            },
            // 新增公司提交
            addAppSubmit() {
                const form = this.addDialog.form;
                const type = this.addDialog.type;
                this.$refs['addDialog.form'].validate((value) => {
                    if (value) {
                        const params = JSON.parse(JSON.stringify(form));
                        if(type === 'add') {
                            this.$api.systemManage.addCompany(params).then((res) => {
                                const { status, error, msg } = res;
                                if ('1' === status && '00000000' === error) {
                                    this.addDialog.isVisible = false;
                                    this.onSearch();
                                    this.$message.success(this.$t('common.successfulOperation'));
                                }
                                else if('70000122' === error) {
                                    this.$message.error(this.$t('system.companyNameIsExist'));
                                }
                                else {
                                    this.$message.error(msg || this.$t('common.failedOperation'));
                                }
                            });
                        }
                        if(type === 'edit') {
                            params.cpId = this.addDialog.id;
                            this.$api.systemManage.editCompany(params).then((res) => {
                                const { status, error, msg } = res;
                                if ('1' === status && '00000000' === error) {
                                    this.addDialog.isVisible = false;
                                    this.$message.success(this.$t('common.successfulOperation'));
                                }
                                else {
                                    this.$message.error(msg || this.$t('common.failedOperation'));
                                }
                                this.getTableData();
                            });
                        }
                    }
                });
            },
            // 状态开关
            changeStatus(row) {
                this.$confirm(row.status === true ? this.$t('system.isOpenCompany') : this.$t('system.isCloseCompany'), '', {
                    confirmButtonText: this.$t('common.confirm'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    this.operStatus(row);
                }).catch(() => {
                    row.status = !row.status;
                });
            },
            // 状态操作
            operStatus(row) {
                const params = {
                    companyUpdateId: row.id,
                    status: row.status === false ? 0 : 1
                };
                this.$api.systemManage.changeCompanyStatus(params).then((res) => {
                    const { status, error, msg } = res;
                    if ('1' === status && '00000000' === error) {
                        this.onSearch();
                        this.$message.success(this.$t('common.successfulOperation'));
                    }
                    else if('70000125' === error) {
                        this.getTableData();
                        this.$message.error(this.$t('system.companyHasUsed'));// 当前有用户绑定该公司，请先解除绑定关系！
                    }
                    else {
                        this.getTableData();
                        this.$message.error(msg || this.$t('common.failedOperation'));
                    }
                });
            },
        },
        created() {
            this.getTableData();
        }
    };
</script>

<style lang="scss" scoped>
    .inputPhone {
        width: 100%;
    }

    .search {
        background-color: #fff;
        padding: 22px 40px 0;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }

    .data_list {
        background-color: #fff;
        margin: 16px 24px;
        padding: 10px 16px;
    }

    .btn {
        margin-right: 15px;
    }

    .btn_red {
        /*border-color: #d9415c;*/
        color: #d9415c;
    }

    // .role_form {
    /*padding: 0 16px;*/
    // }

    .account_form_type {
        width: 100%;
    }
    .pdl-150 {
        padding:0 0 25px 150px;
    }
    .mgl-10 {
        margin-left:10px;
    }
</style>
